<div class="ui-g" [@flyIn]="'active'">
    <div class="ui-g-3 border-spe-right border-spe-left" style="height: calc(100% - 50px)">
        <!--系统补全控件-->
        <p-autoComplete [suggestions]="suggestions" (completeMethod)="search($event)" [(ngModel)]="suggestion"
                        [dropdown]="true" placeholder="系统名称" [minLength]="1" field="label" (onSelect)="selectSuggestion()"
                        [style]="{'margin':'10px 15px 0px 10px', 'width':'100%'}" [inputStyle]="{'width':'83%'}">
        </p-autoComplete>

        <!--分割符-->
        <hr style="margin:8px 0 0 0;">
        <!--系统层级树-->
        <p-tree [value]="systems" selectionMode="single" (onNodeSelect)="nodeSelect()" [(selection)]="selectedNode"
                emptyMessage="无数据" [loading]="loading"
                [style]="{'height': '100%','width':'100%','border-style':'none','padding':'0'}">
        </p-tree>
    </div>
    <div class="ui-g-9">
        <!--操作栏-->
        <div class="button-item border-spe-bottom">
            <button pButton *ngIf="visible" type="text" class="ui-button-danger" icon="fa fa-times" (click)="delete($event)"
                    label="删除"></button>
            <button pButton *ngIf="visible" type="text" class="ui-button-warning" icon="fa fa-pencil-square-o"
                    (click)="update($event)" label="编辑"></button>
            <button pButton type="text" class="ui-button-info" icon="fa fa-plus" (click)="addChildren($event)"
                    label="新增子资源"></button>
        </div>

        <!--资源树状图-->
        <div class="content-item">
            <p-treeTable [value]="resources" emptymessage="所选系统没有配置资源信息" selectionMode="single"
                         [(selection)]="selectedResource" [scrollHeight]="'calc(100vh - 245px)'" [scrollable]="true"
                         (onNodeSelect)="resNodeSelect($event)">
                <ng-template pTemplate="header">
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>资源路径</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                    <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                        <td>
                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                            &nbsp;<i class="{{rowData.displayIcon}}"></i> &nbsp;
                            {{rowData.resTitle}}
                        </td>
                        <td>{{rowData.resTypeName}}</td>
                        <td>{{rowData.resUrl}}</td>
                    </tr>
                </ng-template>
            </p-treeTable>
        </div>
        <!--操作确认框-->
        <p-confirmDialog #cd>
            <p-footer>
                <button type="button" pButton icon="fa fa-close" label="取消" (click)="cd.reject()"></button>
                <button type="button" pButton icon="fa fa-check" label="确定" (click)="cd.accept()"></button>
            </p-footer>
        </p-confirmDialog>
    </div>
</div>
